<template>
  <div class="continuous-wrapper">
    <Card>
      <div :id="id" style="max-width: 800px;height: 300px;"></div>
    </Card>
  </div>
</template>

<script>
export default {
  name: 'Continuous',
  props:{
    title:{
      type: String,
      default: ''
    },
    xData:{
      type: Array,
      default: () => []
    },
    yData:{
      type: Array,
      default: () => []
    }
  },
  data(){
    return {
      dateList: [],
      valueList: [],
      myChart: () => ({}),
      id: 'continuous-chart' + new Date().getTime() + Math.round(Math.random()*10)
    }
  },
  methods:{
    initChart(){
      this.myChart = this.$echarts.init(document.getElementById(this.id));
      this.myEcharts()
    },
    myEcharts(){
      let option = {
        renderer: 'canvas',
        height: 'auto',
        width: 'auto',
        xAxis: {
          type: 'category',
          data: this.dateList
        },
        yAxis: {
          type: 'value',
        },
        series: [{
          data: this.valueList,
          type: 'line',
          showSymbol: false,
        }],
        visualMap: [{
          show: false,
          type: 'continuous',
          seriesIndex: 0,
          min: 0,
          max: 400
        }],
        title: [{
          left: 'center',
          text: this.title,
          textStyle:{
    　　　　 fontSize:13
          }
        }],
        tooltip: {
          trigger: 'axis'
        }
      }
      this.myChart.setOption(option);
    },
    handleResize(){
      this.myChart.resize()
    }
  },
  created(){
    window.addEventListener("resize", this.handleResize)
  },
  mounted(){
    this.initChart()
  },
  beforeDestroy: function () {
    window.removeEventListener("resize", this.handleResize)
  },
  watch: {
    xData(newVal,oldVal){
      this.dateList = newVal
      this.myEcharts()
    },
    yData(newVal,oldVal){
      this.valueList = newVal
      this.myEcharts()
    }
  }
}
</script>

<style lang="less" scoped>
.continuous-wrapper{
  width: 100%;
  padding: 10px;
}
</style>
